<!--
 * @Author: 谢陈洁
 * @Date: 2025-05-26 09:22:58
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-07-14 14:46:52
 * @Description: file content
-->
<template>
  <div class="container">
    <ParticleBackground />
    <el-row>
      <el-col :span="24" :xs="24">
        <div class="login-form">
          <el-card class="login-card">
            <h2 class="login-title">博客管理</h2>
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="70px">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="loginForm.username"
                  autocomplete="off"
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  autocomplete="off"
                  maxlength="50"
                  show-word-limit
                  :show-password="true"
                  @keyup.enter="handleLogin"
                />
              </el-form-item>
              <base-button
                class="login-button"
                @click="handleLogin"
                :loading="loading"
                :disabled="loading"
              >
                登录
              </base-button>
            </el-form>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import type { FormInstance } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '@/stores/userStore'
  // const Image = defineAsyncComponent(() => import('@/components/Image/index.vue'))

  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()
  const loginForm = ref({
    username: 'xie',
    password: '123456'
  })
  const loginFormRef = ref<FormInstance>()
  const loading = ref(false)
  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { max: 50, message: '用户名不能超过50个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { max: 50, message: '密码不能超过50个字符', trigger: 'blur' }
    ]
  }

  const handleLogin = async () => {
    if (loading.value) return // 防止重复提交

    try {
      const valid = await loginFormRef.value?.validate()
      if (valid) {
        loading.value = true
        const loginRes = await userStore.userLogin(loginForm.value)
        loading.value = false
        if (!loginRes) return
        // userStore.getUserInfo()
        const redirect = route.query?.redirect || '/'
        if (redirect === '/login') {
          router.push('/')
        } else {
          router.push(redirect as string)
        }
        ElNotification.success({
          title: '登录成功',
          message: '欢迎回来',
          duration: 2000
        })
      }
    } catch (error) {
      loading.value = false
      ElMessage.error('登录失败，请检查用户名或密码' + error)
      console.error('登录失败:', error)
    }
  }
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100vh;
    // background-image: url('@/assets/images/bg3.png');
    // background-image: url('@/assets/images/bg.png');
    // background-repeat: no-repeat;
    // background-attachment: fixed; // 背景固定
    // backdrop-filter: blur(5px);
    // background-size: cover;
    // background-color: rgb(0 0 0 / 30%);
    // background-blend-mode: color-burn;
    background: #eeaeca;
    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);

    .login-form {
      width: fit-content;
      background-color: rgba($color: #fff, $alpha: 0.4);
      padding: 80px 80px;
      border-radius: 18px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin: auto;
      transform: translateY(50%);
      .login-card {
        width: 350px;
        padding: 30px 20px;
      }

      .login-title {
        text-align: center;
        margin-bottom: 20px;
      }
      .login-button {
        width: 100%;
        height: 40px;
        font-size: 16px;
      }
    }
  }
</style>
